<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="getData">
      <template #memo="{ record }">
        <p class="template-info">{{ record.memo }}</p>
      </template>
      <template #statusName="{ record }">
        <status-tag :value="record.status" :label="record.statusName" />
        <!-- <div class="flex items-center status-wrapper">
          <span :class="[record.statusName == '开启' ? 'open' : 'close', 'status-icon']"></span>
          <span>{{ record.statusName }}</span>
        </div> -->
      </template>
    </table-index>

    <!-- 设置联系电话 -->
    <setPhoneDialog ref="setPhoneDialogRef" @ok="loadData" />
  </div>
</template>

<script setup lang="ts" name="BusinessNoticeList">
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { ref, onMounted, reactive, computed } from 'vue'
  import { getNoticeTemplateList, changeNoticeStatus } from '@/api/business/message'
  import setPhoneDialog from './dialog/set-phone-dialog.vue'
  import { readMsg } from '@/api/common/index'
  import { Message } from '@arco-design/web-vue'
  import { usePageDict } from '@/hooks/useDict'
  import useNavigate from '@/hooks/useNavigate'
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()

  const { navigateTo } = useNavigate()
  const dict = usePageDict('getNoticeTemplateEnums')

  // 接口参数（不包含page信息）
  const queryParam = reactive<any>({})

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '模板类型', prop: 'typeList', type: 'a-select', options: dict.typeEnum, multiple: true },
      { label: '模板状态', prop: 'status', type: 'a-select', options: dict.statusEnum },
    ]
  })

  // 初始化
  const init = () => {
    loadData(queryParam)
  }

  // table 配置
  const table = useTable({
    columns: [
      { title: '模板类型', dataIndex: 'typeName', width: 110 },
      { title: '模板说明', slotName: 'memo', width: 350 },
      { title: '通知方式', dataIndex: 'sendTypeName', width: 110 },
      { title: '模板状态', slotName: 'statusName', width: 90 },
      { title: '操作人', dataIndex: 'updateUserName', width: 110 },
      { title: '操作时间', dataIndex: 'updateTime', width: 170 },
    ],
    operates: [
      {
        label: '查看',
        permission: 'svms:business:business-notice.view',
        method: (record: any) => {
          navigateTo(`/message/business-notice/detail/${record.id}`, `${record.typeName}-模板详情`)
        },
      },
      {
        label: '编辑',
        show: (record: any) => record.type !== 10 && record.type !== 31,
        permission: 'svms:business:business-notice.edit',
        method: (record: any) => {
          navigateTo(`/message/business-notice/edit/${record.id}`, `${record.typeName}-编辑模板`)
        },
      },
      {
        label: '开启模板',
        show: (record: any) => record.statusName == '关闭',
        permission: 'svms:business:business-notice.use',
        method: (record: any) => {
          handleOpera(record)
        },
      },
      {
        label: '关闭模板',
        show: (record: any) => record.statusName == '开启',
        permission: 'svms:business:business-notice.disable',
        method: (record: any) => {
          handleOpera(record)
        },
      },
      {
        label: '设置联系电话',
        show: (record: any) => record.type == 31,
        permission: 'svms:business:business-notice.setPhone',
        method: (record: any) => {
          handleSetPhone(record.id)
        },
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getNoticeTemplateList)
  // 获取表格id
  const getData = () => {
    loadData().then((res: any) => {
      if (res.data?.length > 0) {
        let idList = res.data.map((i: any) => i.id)
        handleUpdateData(idList)
      }
    })
  }
  // 切换分页已读消息
  const handleUpdateData = (idList: any) => {
    readMsg({
      idList: idList,
    }).then(() => {
      userStore.updateUnreadMsgCount()
    })
  }
  // 变更模板状态
  const handleOpera = (val: any) => {
    changeNoticeStatus({
      id: val.id,
      status: val.status == 1 ? 0 : 1,
    }).then(() => {
      loadData(queryParam)
      Message.success('更改模板状态成功')
    })
  }
  // 设置联系电话
  const setPhoneDialogRef = ref(null)
  const handleSetPhone = (id) => {
    setPhoneDialogRef.value.open(id)
  }

  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .template-info {
    white-space: pre-wrap;
  }
  .status-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    &.open {
      background: #00b42a;
    }
    &.close {
      background: #ea0000;
    }
  }
</style>
